<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>调用服务接口</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="jquery-1.3.2.js"></script>
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<style type="text/css">
		#lineTbody input{
			width:100%;
			background: transparent;
		}
		.selTr{
			background-color: #4499ff;
		}
	</style>
  </head>

  <body>
	<div style="width: 1010px;min-height: 600px;overflow: auto;position: absolute;margin-left: 10%;background-color: #F7F7F7;">
		<form>
			<table style="width: 100%">
				<thead>
					<tr style="text-align: left;background-color: #4499ff">
						<th colspan="6">请求参数头信息</th>
					</tr>
				</thead>
				<tbody id="mainTbody">
					<tr>
						<td>业务仓库编号：</td>
						<td><input id="INVTY_ID" class="xx"/><label style="color: red;">*</label> </td>
						<td>公司编号：</td>
						<td><input id="ORG_CODE"/><label style="color: red;">*</label></td>
						<td>协议编码：</td>
						<td><input id="AGREE_NUM"/><label style="color: red;">*</label></td>
					</tr>
					<tr>
						<td>采购合同编号（合同号）：</td>
						<td><input id="STAND_NUM"/><label style="color: red;">*</label></td>
						<td>类型：</td>
						<td><input id="REF_TYPE"/><label style="color: red;">*</label></td>
						<td>参考单号码：</td>
						<td><input id="REF_NUM"/><label style="color: red;">*</label></td>
					</tr>
				</tbody>
			</table>
			<table style="width: 100%;margin-top: 5px;" border="1" cellpadding="0" cellspacing="0">
				<thead>
					<tr style="text-align: left;background-color: #4499ff">
						<th colspan="7">请求参数行信息</th>
					</tr>
					<tr>
						<td colspan="7">
							<div style="float: right;">
								<input type="button" value="新增" onclick="addRow();"/>
								<input type="button" value="删除" onclick="delSelRow()"/>
							</div>
						</td>
					</tr>
					<tr>
						<th>序号</th>
						<th>卷烟代码<label style="color: red;">*</label></th>
						<th>卷烟编码</th>
						<th>商品类别<label style="color: red;">*</label></th>
						<th>到货业务数量<label style="color: red;">*</label></th>
						<th>到货不含税金额<label style="color: red;">*</label></th>
						<th>到货含税金额<label style="color: red;">*</label></th>
					</tr>
				</thead>
				<tbody id="lineTbody" onmousedown="TrElement(event)"></tbody>
				<tfoot>
					<tr>
						<td colspan="7">
							<input type="button" value="调用接口" style="left: 50%;position: relative;width: 300px;height: 50px;font-size: 40px;margin-left: -150px;" onclick="post();"/>
						</td>
					</tr>
				</tfoot>
			</table>
		</form>
		<div id="xx" style="overflow: auto;"></div>
	</div>
	<script type="text/javascript">
		//新增一行空的tr
		function addRow(){
			var tbody = document.getElementById("lineTbody");
			var num = document.getElementsByName("CGT_CODE").length;
			var trs = tbody.innerHTML;
			alert(trs)
			var tempTr='<tr><td style="text-align: center;">'+(num+1)+'</td>'
				+'<td><input name="CGT_CODE"/></td>'
				+'<td><input name="ITEM_ID"/></td>'
				+'<td><input name="ITEM_KIND"/></td>'
				+'<td><input name="QTY"/></td>'
				+'<td><input name="AMT_NO_TAX "/></td>'
				+'<td><input name="AMT_TAX"/></td></tr>';
			trs+=tempTr;
			tbody.innerHTML=trs;
		}
		//高亮节显示选中的行
		function TrElement(e){
			var targ;
		 	if (!e) 
		 		var e = window.event
			if (e.target)
				targ = e.target
			else if (e.srcElement) 
				targ = e.srcElement
			if (targ.nodeType == 3) // defeat Safari bug
		   		targ = targ.parentNode
			var tname=targ.tagName
			var tbody = document.getElementById("lineTbody");
			var trs = tbody.children;
			var len = trs.length;
			//去掉所有高亮节的行
			for(var i=0;i<len;i++){
				trs[i].setAttribute("class","");
			}
			//高亮节显示选中行
			if(tname=="INPUT" || tname=="TD"){
				switch (tname) {
				case "INPUT":
					e.srcElement.parentNode.parentNode.setAttribute("class","selTr");
					break;
				case "TD":
					e.srcElement.parentNode.setAttribute("class","selTr");
					break;
				}
			}
		}
		
		
		//删除选中的行
		function delSelRow(){
			var tbody = document.getElementById("lineTbody");
			var trs = tbody.children;
			var len = trs.length;
			var isSel=false;
			var selTr;
			for(var i=0;i<len;i++){
				var sel = trs[i].getAttribute("class");
				if(sel!="" && sel!=undefined && sel!=null){
					isSel=true;
					selTr = trs[i];
					break;
				}
			}
			if(!isSel){
				alert("请选择要删除的行 .");
			}else{
				tbody.removeChild(selTr);
				sortNumber();
			}
		}
		
		//重新排序序号
		function sortNumber(){
			var tbody = document.getElementById("lineTbody");	
			var trs = tbody.children;
			var len = trs.length;
			for(var i=0;i<len;i++){
				var tds = trs[i].children;
				tds[0].innerHTML=(i+1);
			}
		}
		
		
		//发送post请求，组装请求参数
		//params={inJson:...}
		function post() {
			//检查必填数据是否为空
			var isnull = checkDataisNull();
			if(isnull)
				return;
			var tbody = document.getElementById("lineTbody");	
			var trs = tbody.children;
			var trLen = trs.length;
			var array = new Array();
			for(var i=0;i<trLen;i++){
				  var tempJson={
				  	"CGT_CODE": trs[i].children[1].children[0].value,
					"ITEM_ID": trs[i].children[2].children[0].value,
					"ITEM_KIND": trs[i].children[3].children[0].value,
					"QTY": trs[i].children[4].children[0].value,
					"AMT_NO_TAX": trs[i].children[5].children[0].value,
					"AMT_TAX": trs[i].children[6].children[0].value
          		  }
          		  array[i]=tempJson;
			}
			var inJsonV={
				"HEAD": { "SOURCE": "putian" },
				"BODY": {
					"DATASET": [{
						"INVTY_ID": document.getElementById("INVTY_ID").value,
				        "ORG_CODE": document.getElementById("ORG_CODE").value,
				        "AGREE_NUM": document.getElementById("AGREE_NUM").value,
				        "STAND_NUM": document.getElementById("STAND_NUM").value, 
						"REF_TYPE": document.getElementById("REF_TYPE").value,     
						"REF_NUM": document.getElementById("REF_NUM").value,
						"DATASET_LINE": array
					}]
				}
			};
			var str = JSON.stringify(inJsonV);
			document.getElementById("xx").innerHTML="<b>输入参数：</b>"+str;
			var URL = "pi/restful/inItemInvty/inItemInvty";
			var params =  {inJson:str};
			//post提交
			$.post(URL,params,function(data){
				var showInfo = document.getElementById("xx");
				var temp =showInfo.innerHTML+"<br/><br/><b>输出参数：</b>"+data;
				showInfo.innerHTML=temp;
			});
			return;
			//submit提交
		    var temp = document.createElement("form");        
		    temp.action = URL;        
		    temp.method = "post";  
		    temp.style.display = "none";        
		    for (var x in params) {        
		        var opt = document.createElement("textarea");        
		        opt.name = x;        
		        opt.value = params[x];
		        // alert(opt.name)        
		        temp.appendChild(opt);        
		    }
		    document.body.appendChild(temp);        
		    temp.submit();        
		    return temp;  
		}
		
		//校验必填数据是否为空(包含对头和行的检查)
		function checkDataisNull(){
			var isNull = false;
			var tbody = document.getElementById("mainTbody");
			var trs = tbody.children;
			var len = trs.length;
			for(var i=0;i<len;i++){
				var tds = trs[i].children;
				var tdLen = tds.length;
				for(var j=0;j<tdLen;j++){
					if(j%2!=0){
						//奇数
						//必填数据
						var val = tds[j].children[0].value;
						if(val.length==0 || val.replace(/ {0,}/g,"")==""){
							isNull = true;
							alert("必填《头》数据，位于第"+(i+1)+"行第"+(j+1)+"列，数据不能办空，请处理.");
							return isNull;
						}
					}
				}
			}
			if(!isNull)//头不为空，继续检查行
				isNull=checkLineFrom();
			return isNull;
		}
		//校验请行表单数据是否为空,true is null,false is not null
		function checkLineFrom(){
			var isNull = false;
			var tbody = document.getElementById("lineTbody");	
			var trs = tbody.children;
			var trLen = trs.length;
			if(trLen==0){
				alert("没有行数据，请点击新增按钮，进行添加操作.");
				return true;
			}
			for(var i=0;i<trLen;i++){
				var tds = trs[i].children;
				var tdLen = tds.length;
				for(var j=0;j<tdLen;j++){
					if(j!=0 && j!=2){
						//必填数据
						var val = tds[j].children[0].value;
						if(val.length==0 || val.replace(/ {0,}/g,"")==""){
							isNull = true;
							alert("必填《行》数据，位于第"+(i+1)+"行第"+(j+1)+"列，数据不能办空，请处理.");
							return isNull;
						}
					}
				}
			}
			return isNull;
		}
	</script>
  </body>
</html>
